---
import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
---

<VerticalSideBarLayout title="Unauthorized - EventCatalog">
  <div class="flex h-[calc(100vh-120px)] bg-white">
    <main class="flex w-full items-center justify-center bg-white text-center sm:p-12">
      <div class="w-full max-w-xl text-center">
        <div class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-red-100">
          <svg
            class="h-9 w-9 text-red-600"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
          </svg>
        </div>

        <h1 class="text-3xl font-bold text-gray-800 mb-4">Access Denied</h1>

        <p class="max-w-md mx-auto text-base text-gray-500 mb-8">You don't have permission to access this resource.</p>

        <!-- Client-side path display -->
        <div
          id="path-container"
          class="hidden mb-8 w-full max-w-lg mx-auto rounded-lg border border-gray-200 bg-gray-100 p-4 text-left"
        >
          <p class="mb-2 text-sm font-medium text-gray-600">Requested path:</p>
          <code id="requested-path" class="break-all font-mono text-sm text-gray-800"></code>
        </div>

        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <button
            onclick="history.back()"
            class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          >
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Go Back
          </button>

          <a
            href="/dashboard"
            class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          >
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
            </svg>
            Go to Dashboard
          </a>
        </div>
      </div>
    </main>
  </div>

  <!-- Client-side script -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Get query parameters on the client side
      const url = new URL(window.location.href);
      const path = url.searchParams.get('path');

      if (path) {
        const pathContainer = document.getElementById('path-container');
        const requestedPath = document.getElementById('requested-path');

        if (pathContainer && requestedPath) {
          requestedPath.textContent = path;
          pathContainer.classList.remove('hidden');
        }
      }
    });
  </script>
</VerticalSideBarLayout>
